這次主要參考的書(或文章影片)是:「JavaScript資料結構及演算法實作 Loiane Groner著」/youtuber:彭彭的課程之JavaScript網頁前端工程入門
前言:之所以想做計算機是因為我想做的旅遊網站我希望可以幫忙使用者做預算控制,因此想做一個計算機來套進網頁中。
開始之前,先更正一下昨天的程式碼
其實我還沒找到錯誤在哪,不知道為什麼無法成功讓運算結果顯示出來
但我改了另外一個方法便成功了
同時也加了減法/乘法/除法的運算
其實幾乎都是複製貼上而已啦XD
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>javascript函數練習</title>
</head>
<script>
function hello(){
alert("hello world");
}
//hello();
function add(){
var numberFir = parseInt(document.getElementById('numFirst').value);
var numberSec = parseInt(document.getElementById('numSecond').value);
var total = numberFir+numberSec;
document.getElementById('totalid').textContent = total;
}
function mulit(){
var numberFir = parseInt(document.getElementById('numFirst').value);
var numberSec = parseInt(document.getElementById('numSecond').value);
var total = numberFir*numberSec;
document.getElementById('mulitId').textContent = total;
}
function qu(){
var numberFir = parseInt(document.getElementById('numFirst').value);
var numberSec = parseInt(document.getElementById('numSecond').value);
var total = numberFir/numberSec;
document.getElementById('quId').textContent = total;
}
function sub(){
var numberFir = parseInt(document.getElementById('numFirst').value);
var numberSec = parseInt(document.getElementById('numSecond').value);
var total = numberFir-numberSec;
document.getElementById('subId').textContent = total;
}
</script>
<body>
<p>請輸入數字1<input type="text" id='numFirst'>
請輸入數字2<input type="text" id='numSecond'></p>
<p><button onclick="add()">求和</button>=<em id='totalid'></em></p>
<p><button onclick="mulit()">求乘</button>=<em id='mulitId'></em></p>
<p><button onclick="qu()">求商</button>=<em id="quId"></em></p>
<p><button onclick="sub()">求差</button>=<em id="subId"></em></p>
</body>
</html>
成功後應該顯示如下
接下來看看計算機的程式碼吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>計算機練習</title>
<script>
function start(){
var btnget = document.getElementsByClassName("btn");
var btnOnWindow = document.getElementsByClassName("window")[0];
var btnDelAc = document.getElementsByClassName("btnDelAc");
var wayres = [];
for(var i = 0; i <btnDelAc.length; i++){
btnDelAc[i].onclick = function(){
if(this.value == "AC"){
wayres = [];
btnOnWindow.value = "";
}
else{
btnOnWindow.value = btnOnWindow.value.substr(0, btnOnWindow.value.length - 1);
}
}
}
for(var i=0; i < btnOnWindow.length; i++){
btnOnWindow[i].onclick = function(){
if(btnOnWindow.value =="" && this.value =="."){
btnOnWindow.value = "0.";
}
else{
if(!isNaN(this.value)||this.value == "."){
if(btnOnWindow.value.indexOf(".")!= -1){
if(this.value!="."){
btnOnWindow.value += this.value;
}
}
else{
btnOnWindow.value += this.value;
}
}
else{
if(this.value!="="){
wayres[wayres.length]=btnOnWindow.value;
wayres[wayres.length]=this.value;
btnOnWindow.value = "";
}
else{
wayres[wayres.length] = btnOnWindow.value;
btnOnWindow.value = eval(wayres.join(""));
wayres=[];
}
}
}
}
}
}
</script>
<style type="text/css">
table{
border-collapse: collapse;
margin: auto;
}
td{
width:150px;
border:1px solid black;
}
.btn{
width:150px;
font-size: x-large;
}
.btnClick{
width:300px;
font-size: x-large;
}
.window{
width:600px;
font-size: x-large;
text-align: right;
}
.btnZero{
width:300px;
font-size: x-large;
}
</style>
</head>
<body onload = "start();">
<table>
<tr>
<td colspan="4"><input class="window" type='text' disabled/></td>
</tr>
<tr>
<td colspan="2"><input class="btnClick" type='button' value="AC"/></td>
<td colspan="2"><input class="btnClick" type='button' value="Del"/></td>
</tr>
<tr>
<td><input class="btn" type="button" value="7"/></td>
<td><input class="btn" type="button" value="8"/></td>
<td><input class="btn" type="button" value="9"/></td>
<td><input class="btn" type="button" value="+"/></td>
</tr>
<tr>
<td><input class="btn" type="button" value="4"/></td>
<td><input class="btn" type="button" value="5"/></td>
<td><input class="btn" type="button" value="6"/></td>
<td><input class="btn" type="button" value="-"/></td>
</tr>
<tr>
<td><input class="btn" type="button" value="1"/></td>
<td><input class="btn" type="button" value="2"/></td>
<td><input class="btn" type="button" value="3"/></td>
<td><input class="btn" type="button" value="*"/></td>
</tr>
<tr>
<td colspan="2"><input class="btnZero" type="button" value="0"/></td>
<td><input class="btn" type="button" value="="/></td>
<td><input class="btn" type="button" value="/"/></td>
</tr>
</table>
</body>
</html>
這次程式碼包含了之前學過的css/html和現在的java
不過尷尬的是這次一樣還無法成功運行
所以就先不解釋寫了什麼
希望明天也能找出答案QQ
小建議:JAVASCRIPT 和真的JAVA 有區別,為了區隔開來還是建議JavaScript縮寫可以用JS.新手如我學習上比較不會產生誤會 ^^"
不好意思,一時沒注意到,我也還在學習中,如果有錯誤還麻煩您繼續指正我謝謝
相互勉勵,一起加油吧